<template>
  <div class="searchShop">
    <NavBar title="搜索列表" />
    <!-- 价格排序 -->
    <div class="jia">
      <van-tabs @click="onClick" sticky class="top">
        <van-tab title="综合">
          <van-grid :column-num="2" :gutter="20">
            <van-grid-item v-for="item in list" :key="item.id" class="shop" :to="'/shopdetails/' + item.id">
              <van-image
                :src="API.BASE_SERVER_URL + item.defaultImg"
                fit="cover"
              />
              <p class="shoptitle">{{ item.name | shopName }}</p>
              <p class="jiage">￥{{ (item.shopPrice / 100).toFixed(2) }}</p>
            </van-grid-item>
            <van-cell v-if="list.length === 0 || gengdou" class="mygengdou">没有更多了</van-cell>
            <van-button
            type="default"
            v-else
            size="small"
            block
            @click="getShopList(false)"
            >加载更多</van-button>
          </van-grid>
        </van-tab>
        <van-tab>
          <div class="jiatitle" slot="title">
            <span>价格</span>
            <van-icon
            :name="sort"
            :color="sort == 'sort' ? '' : 'red'"/>
          </div>
          <van-grid :column-num="2" :gutter="20">
            <van-grid-item v-for="item in sortList" :key="item.id" class="shop" :to="'/shopdetails/' + item.id">
              <van-image
                :src="API.BASE_SERVER_URL + item.defaultImg"
                fit="cover"
              />
              <p class="shoptitle">{{ item.name | shopName }}</p>
              <p class="jiage">￥{{ (item.shopPrice / 100).toFixed(2) }}</p>
            </van-grid-item>
            <van-cell v-if="list.length === 0 || gengdou" class="mygengdou">没有更多了</van-cell>
            <van-button
            type="default"
            v-else
            size="small"
            block
            @click="getShopList(false)"
            >加载更多</van-button>
          </van-grid>
        </van-tab>
        <van-tab title="新品"><van-grid :column-num="2" :gutter="20">
            <van-grid-item v-for="item in nowList" :key="item.id" class="shop" :to="'/shopdetails/' + item.id">
              <van-image
                :src="API.BASE_SERVER_URL + item.defaultImg"
                fit="cover"
              />
              <p class="shoptitle">{{ item.name | shopName }}</p>
              <p class="jiage">￥{{ (item.shopPrice / 100).toFixed(2) }}</p>
            </van-grid-item>
            <van-cell v-if="list.length === 0 || gengdou" class="mygengdou">没有更多了</van-cell>
            <van-button
            type="default"
            v-else
            size="small"
            block
            @click="getShopList(false)"
            >加载更多</van-button>
          </van-grid></van-tab>
      </van-tabs>
    </div>
    <Tabbar />
  </div>
</template>
<script>
export default {
  data () {
    return {
      number: 0,
      search: '',
      page: 0,
      list: [],
      gengdou: false,
      sort: 'sort',
      sortList: [],
      sortStater: true,
      nowList: []
    }
  },
  methods: {
    onClick (index) {
      if (index === 1) {
        this.sortList = this.list.sort((a, b) => {
          return this.sortStater ? a.shopPrice - b.shopPrice : b.shopPrice - a.shopPrice
        })
        this.sortStater ? this.sort = 'arrow-up' : this.sort = 'arrow-down'
        this.sortStater = !this.sortStater
      }
      if (index === 2) {
        this.nowList = this.list.sort((a, b) => { return a.createTime - b.createTime })
      }
    },
    async getShopList (val) {
      this.page += 1
      const { data: res } = await this.$get(this.API.API_URL_CATALOG_SEARCH_PRODUCTS + '/' + this.search + '/page/' + this.page)
      if (res) {
        val ? this.list = [...res.productList, ...this.list] : this.list = [...this.list, ...res.productList]
      }
      if (res.productList.length === 0) this.gengdou = true
    }
  },
  created () {
    this.search = this.$route.params.str
    this.getShopList()
  },
  mounted () {
  },
  filters: {
    shopName (val) {
      return val.length > 18 ? val.slice(0, 18) : val
    }
  },
  computed: {
  }
}
</script>
<style scoped>
.searchShop {
  height: 84vh;
}
.jia {
  padding-bottom: 50px;
}
div /deep/ .shop .van-grid-item__content {
  padding: 10px 30px;
}
 div /deep/ .top .van-sticky--fixed {
  top: 46px
}
.shop p {
  margin: 0;
  color: #646566;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
}
.shop .shoptitle {
  padding: 2px;
  margin-top: 8px;
}
.shop .jiage {
  font-size: 16px;
  color: #f38b0c;
}
div /deep/ .mygengdou .van-cell__value--alone {
  text-align: center;
}
</style>
